<template>
	<view class="total">
		<view class="address">
			{{item.uaddress}}
		</view>
		<view class="oneDaily" @click="toDetail(item)">
			<view class="head">
				<image :src="item.head" mode="" class="circle"></image>
				<view class="name">
					<view class="title">{{item.title}}</view>
					<view class="uname">{{item.uname}}</view>
					
				</view>
			</view>
			<view class="inText">
				{{item.text}}
			</view>
			<view class="pictures">
				<image :src="item.images[0]" mode="" class="picture"></image>
				<image :src="item.images[1]" mode="" class="picture"></image>
				<view class="jump"></view>
			</view>
			<view class="interact">
				<view class="inner">
					<image :src="sendImage[this.sendImageNumber]" mode="" @click="activesend()"></image>
					<view class="numbers">
						{{item.sendNumber}}
					</view>
				</view>
				<view class="inner">
					<image src="../../static/comment.png" mode=""></image>
					<view class="numbers">
						{{item.commentNumber}}
					</view>
				</view>
				<view class="inner">
					<image :src="likeImage[this.likeImageNumber]" mode="" @click="activelike()"></image>
					<view class="numbers">
						{{item.likeNumber}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tribeDaily",
		
		
		props:{
			item:{
				type:Object,
				default(){
					return {
						title:'live house氛围太棒啦！',
						uname:'一拍即合',
						uaddress:'郑州市金水区',
						text:'和搭子一起去看live了，现场氛围真的超棒',
						likeNumber:0,
						commentNumber:0,
						sendNumber:0,
						head:'',
						images:[]
						
					}
				}
			}
		},
		data() {
			return {
				
				flag1:true,
				flag2:true,
				flag3:true,
				likeImage:[
					'../../static/likeIt.png',
					'../../static/activeLike.png'
				],
				likeImageNumber:0,
				
				sendImage:[
					'../../static/sendto.png',
					'../../static/activesend.png'
				],
				sendImageNumber:0,
				
			};
		},
		methods: {
			activelike(){
				this.likeNumber=this.flag1?this.likeNumber+1:this.likeNumber-1
				this.likeImageNumber=this.flag1?this.likeImageNumber+1:this.likeImageNumber-1
				this.flag1=!this.flag1
				event.stopPropagation()
			},
			activesend(){
				
			},
			toDetail(item){
				uni.navigateTo({
					url:`/pages/tribe/details/dailyDetails?id=${item.id}`
				})
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
.total {
	// position: absolute;
	
	.address {
		color: white;
		font-weight: 600;
		text-align: center;
		position: relative;
		float: right;
		right: 20rpx;
		top: 150rpx;
		background-color: #a0d6cd;
		width: 250rpx;
		height: 50rpx;
		
		}
	.oneDaily {
		height: 420rpx;
		width: 660rpx;
		border-radius: 50rpx;
		background-color: #eafcfd;
		margin-top: 30rpx;
		margin-left: 45rpx;
		display: inline-block;
		
		.head {
			width: 100%;
			height: 120rpx;
			
			.circle {
					display: inline-block;
					height: 90rpx;
					width: 90rpx;
					border-radius: 45rpx;
					margin-top: 20rpx;
					margin-left: 25rpx;
					margin-right: 20rpx;
					background-color: pink;
				}
				.name {
					position: relative;
					top: -15rpx;
					display: inline-block;
					margin-left: 8rpx;
					height: 60rpx;
					width: 450rpx;
					color: #666c6c;
					
					.title {
						font-size: 40rpx;
						font-weight: 600;
						margin-top: 20rpx;
						height: 50rpx;
						
					}
					.uname {
						font-size: 27rpx;
						font-weight: 600;
						height: 50rpx;
						width: 40%;
						display: inline-block;
					}
					
				}
		
		
		}
		.inText {
			font-size: 32rpx;
			text-indent: 30rpx;
			// text-align: center;
			font-weight: 600;
			color: gray;
		}
		.pictures {
			
			height: 150rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 20rpx;
			
			.picture {
				width: 240rpx;
				height: 100%;
				display: inline-block;
				background-color: white;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.jump {
				width: 70rpx;
				background-color: #b8f5f5;
				display: inline-block;
				height: 100%;
				border-radius: 15rpx;
			}
		}
		.interact {
			height: 80rpx;
			width: 100%;
			
			.inner {
				width: 110rpx;
				height: 60rpx;
				display: inline-block;
				float: right;
				margin-top: 20rpx;
				
				
				image {
					width: 55rpx;
					height: 55rpx;
					display: inline-block;
				}
				.numbers {
					display: inline-block;
					font-size: 20rpx;
					width: 50rpx;
					text-align: center;
					position: relative;
					top: -20rpx;
					
				}
			}
		}
	}
}
</style>